<template>
  <div style="height:100vh;">
    <div class="model">
      <!-- 管理 -->
      <div class="left">
        <ul>
          <li
            v-for="(item, index) in list"
            :key="index"
            :class="$route.path == item.path ? 'active' : ''"
          >
            <router-link :to="item.path">{{ item.name }}</router-link>
          </li>
        </ul>
      </div>
      <div class="right">
        <el-button @click="logOut">退出登录</el-button>
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          path: "/manage/userPermisition",
          name: "角色权限"
        },
        {
          path: "/manage/pageSet",
          name: "页面设置"
        },
        {
          path: "/manage/linkSet",
          name: "链接管理"
        },
        {
          path: "/manage/userSet",
          name: "用户管理"
        },
        {
          path: "/manage/sysSet",
          name: "系统设置"
        }
      ]
    };
  },
  methods: {
    logOut() {
      this.$confirm("是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$store.commit("logOut");
        })
        .catch(() => {});
    }
  }
};
</script>

<style scoped lang="scss">
.model {
  display: flex;
  height: inherit;
  .left {
    width: 200px;
    ul {
      li {
        a {
          padding: 30px 0;
          display: block;
          text-align: center;
          color: inherit;
        }
      }
      li.active {
        color: $font-color;
      }
    }
  }
  .right {
    flex-grow: 1;
    padding: 0 30px;
  }
}
</style>
